<template>
    <el-row v-loading="loading" style="width:100%">
        <el-row class="search-form-row" v-if="user.companyId === -99">
          <el-form :inline="true" class="demo-form-inline">
            <el-form-item :label="$t('register.companyName')">
              <el-input v-model="company_name_query" :placeholder="$t('company.company')"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="queryPage(1)">{{$t('standard.query')}}</el-button>
            </el-form-item>
            <el-form-item >
              <el-button type="primary" @click="showAddDialog">{{$t('company.newCompany')}}</el-button>
            </el-form-item>
          </el-form>
        </el-row>
        <el-row>
            <tree-grid :columns="columns" :tree-structure="true" :data-source="dataSource" requestUrl="companyadd"
                delUrl="/api/company/delete" :flushFuc="queryPage"></tree-grid>
          <!--<el-table :data="treeData" style="width: 100%">
            <el-table-column type="index" width="50"></el-table-column>
            <el-table-column align="left" prop="user_name" label="企业名称">
            <template slot-scope="scope">
                <div style="width:210px;">
                    {{ scope.row.text }}
               </div>
                <el-tree :data="scope.row.children" default-expand-all
                         :props="defaultProps"
                         :expand-on-click-node="false" style="font-size: 18px;line-height: 30px">
                    <span class="custom-tree-node" slot-scope="{ node, data }">
                        <div style="width:210px;">
                            {{ data.text }}
                       </div>
                    </span>
                </el-tree>
            </template>
            </el-table-column>
            <el-table-column align="left" prop="resolution" label="分辨率"></el-table-column>
            <el-table-column align="left" label="操作" width="330px">
              <template slot-scope="scope">
                <el-button size="mini" type="success" @click="showModifyDialog(scope.row)">修改</el-button>
                <el-button size="mini" type="danger" @click="addSubcompany(scope.row.id)">新增子公司</el-button>
                <el-button size="mini" type="danger" @click="deleteCompany(scope.row.id)">删除</el-button>
                <el-button size="mini" type="danger" @click="detailInfo(scope.row)">详情</el-button>
              </template>
            </el-table-column>
          </el-table>-->
        </el-row>
        <el-row style="text-align: right;margin-top: 10px">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageInfo.currentPage"
            :page-sizes="[10, 20, 50]"
            :page-size="pageInfo.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageInfo.totalNum">
          </el-pagination>
        </el-row>

        <el-dialog :title="formTitle" :visible.sync="addFormVisible" width="30%" :show-close="false">
          <el-form :model="addForm" :rules="addRules" ref="addForm" label-width="100px">
            <el-form-item :label="$t('register.companyName')" prop="company_name">
              <el-input v-model="addForm.company_name" auto-complete="off" style="width: 90%;" :disabled="!!addForm.id"></el-input>
            </el-form-item>
            <el-form-item :label="$t('company.contact')" prop="contact">
              <el-input v-model="addForm.contact" auto-complete="off" style="width: 90%;"></el-input>
            </el-form-item>
            <el-form-item :label="$t('company.phone')" prop="phone">
              <el-input v-model="addForm.phone" auto-complete="off" style="width: 90%;"></el-input>
            </el-form-item>
            <el-form-item :label="$t('company.companyMail')" prop="email">
              <el-input v-model="addForm.email" auto-complete="off" style="width: 90%;"></el-input>
            </el-form-item>
            <el-form-item :label="$t('company.companyAdd')" prop="address" >
              <select-tree v-model="addForm.address" width="90%" :props="defaultProps" />
            </el-form-item>
            <el-form-item :label="$t('company.resolvingPower')" prop="resolution">
              <select-tree v-model="addForm.resolution" width="90%":props="defaultProps" />
            </el-form-item>
            <el-form-item :label="$t('company.Time')" prop="total_duration">
               <select-tree v-model="addForm.total_duration" width="90%" :props="defaultProps" />
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="addFormVisible = false">{{$t('standard.cancel')}}</el-button>
            <el-button type="primary" @click="saveOrUpdateUser">{{$t('standard.confirm')}}</el-button>
          </div>
        </el-dialog>
      </el-row>
</template>

<script>
  import company from './company'

  export default company;

</script>

<style>
  .search-form-row{
    text-align: left;
    padding-left: 20px;
  }
  .el-container {
        margin-bottom: 10px;
        margin-top: 70px;
    }
  .word-break{
      width:300px;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
  }
</style>
